<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
    <title>
        JS Bridge
    </title>

    <style>
        body{
            padding: 0;
            margin: 0;
        }
        .button_container{
            padding: 12px 24px;
        }
        input[type=button] {
            width: 100%;
            display: block;
            margin-top: 8px;
            padding: 10px 20px;
        }
    </style>
</head>

<body>

<div class="button_container">
    <input type="button" id="test1" value="发消息给Native"/>
    <input type="button" id="test2" value="原生不支持的指令"/>
    <input type="button" id="test3" value="超时控制"/>
    <input type="button" id="test4" value="原生返回错误"/>
</div>
<div id="message_console">

</div>
</body>
<script>
    var messageConsoleBox = document.getElementById("message_console");
    document.getElementById('test1').addEventListener('click', function(){
        sendNativeMsg('normal', {
            id: 1,
            info: "来自 WebView 的消息"
        })
    })

    document.getElementById('test2').addEventListener('click', function(){
        sendNativeMsg('notSupport', {
            id: 2,
            info: "来自 WebView 的消息"
        })
    })

    document.getElementById('test3').addEventListener('click', function(){
        sendNativeMsg('timeout', {
            id: 3,
            info: "来自 WebView 的消息"
        }, 500)
    })

    document.getElementById('test4').addEventListener('click', function(){
        sendNativeMsg('nativeError', {
            id: 3,
            info: "来自 WebView 的消息"
        }, 500)
    })

    function sendNativeMsg(cmd, data, timeout) {
        window.EmoBridge.send({
            cmd: cmd,
            data: data,
            timeout: timeout,
            onResponse: function(data){
                var text = document.createElement('p')
                text.innerText = JSON.stringify(data)
                messageConsoleBox.appendChild(text)
            },
            onFailed: function(error){
                var text = document.createElement('p')
                text.innerText = error
                messageConsoleBox.appendChild(text)
            },
            onTimeout: function(){
                var text = document.createElement('p')
                text.innerText = "超时了，可惜"
                messageConsoleBox.appendChild(text)
            }
        })
    }

    document.addEventListener('EmoBridgeReady', function () {
        var text = document.createElement('p')
        text.innerText = "Bridge加载完成。"
        messageConsoleBox.appendChild(text)

        window.EmoBridge.getSupportedCmdList(function(data){
            var text = document.createElement('p')
            var cmdList = "原生支持的指令："
            if(data && data.length){
                for(var i = 0; i< data.length; i++){
                    cmdList += data[i]
                    if(i < data.length - 1){
                        cmdList += ", "
                    }
                }
            }
            text.innerText = cmdList
            messageConsoleBox.appendChild(text)
        })
    }, false);
</script>

</html>

